// import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { Dialog } from '@knownsec/react-component';

import s from './showTC.module.css';
import { WARNING_SECURITYEVENT_MAP } from '@/common/common';
import { datetime } from '@/common/formatter';

function ShowTC({ children, info, foundAt }) {
  const [isEmpty,setIsEmpty] = React.useState(null);

  const typeArr = Object.keys(info).map((e) => {
    return e;
  });

  const [visible, setVisible] = React.useState(false);
  const codeHit = () => {
    const style = {
      background: 'rgb(255, 249, 238)',
      'border-width': '1px',
      'border-style': 'solid',
      'border-color': 'rgb(254, 232, 182)',
    };
    const dom = [];
    return (
      <div className={s.codeType}>
        {['keyword'].map((type) => {
          info[type][0].extra_risk_evidences.forEach((code) => {
            const str = code.split(info[type][0].risk_rule);
            dom.push(
              <p>
                {str.map((e, i) => {
                  if (i < str.length - 1) {
                    return (
                      <>
                        <span>{e}</span>
                        <span style={style}>{info[type][0].risk_rule}</span>
                      </>
                    );
                  } else {
                    return <span>{e}......</span>;
                  }
                })}
              </p>
            );
          });
          if (dom[0]) {
            setIsEmpty( <div className={s.content}>
              {/* <span>{WARNING_SECURITYEVENT_MAP[type]}</span> */}
              <div className={s.codeBox}>
                {dom.map((e) => {
                  return e;
                })}
              </div>
            </div>)
          } else {
            setIsEmpty(null)
            return <div className={s.codeBox}>暂无数据</div>;
          }
        })}
      </div>
    );
  };
  const foreign_links = () => {
    return (
      <>
        <div>
          <span>风险外链：</span>
          <span className={s.outUrl} title={info[typeArr[0]][0].risk_url}>
            {info[typeArr[0]][0].risk_url}
          </span>
        </div>
        <div>
          <span>抓取时间：</span>
          <span>{isEmpty?datetime(foundAt) || '--': '--'}</span>
        </div>

        <div>
          <span>外链源码：</span>
        </div>
        {isEmpty||<div className={s.codeBox}>暂无数据</div>}
      </>
    );
  };
  React.useEffect(() => {codeHit()},[info])
  return (
    <>
      <div link primary className={s.tcbtn} onClick={() => setVisible(true)}>
        {children}
      </div>
      <Dialog
        title={children}
        visible={visible}
        className={s.Dialog}
        cancelText="关闭"
        confirmText=""
        onhide={() => setVisible(false)}
      >
        <div className={s.actions}>{foreign_links()}</div>
      </Dialog>
    </>
  );
}

ShowTC.propTypes = {
  type: PropTypes.string,
  className: PropTypes.string,
  children: PropTypes.node,
  host: PropTypes.string.isRequired,
  triggerType: PropTypes.string.isRequired,
  taskSettings: PropTypes.shape({
    collect: PropTypes.object.isRequired,
    interval: PropTypes.number,
    alert: PropTypes.object,
    enable: PropTypes.bool,
  }),
  jobId: PropTypes.string,
  taskType: PropTypes.string,
  isLatestTask: PropTypes.bool,
  note: PropTypes.string,
  info: PropTypes.any,
};
ShowTC.defaultProps = {
  className: '',
  note: '',
};

export default ShowTC;
